<template>
	<view class="page content-20 page-bg">
		<!-- <view class="form-wrap">
			<view class="form-group form-group__checkbox">
				<view class="form-group__title">查找宠物</view>
				<view class="form-group__con">
					<input class="form-group__from" :auto-focus='true' v-model="formData.phoneNumber" type="text" placeholder="输入宠物名称/手机号/病历号查找" placeholder-class="placeholder-class" />
					<view class="btn">搜索</view>	
				</view>
			</view>
		</view> -->
		
		<view class="item-box" v-if="pet.avatar">
			<image  class="avatar item-img" :src="item.avatar" mode=""></image>
			<view class="item-info">
				<view class="title item-title">{{item.nickName}}({{item.varietiesView}})</view>
				<view class="item-desc">{{item.petColor}} | {{item.weight}}kg | {{common.petsSex[item.petSex]}}</view>
			</view>
			<view class="item-btn btn-theme" @click="editPets(item)">编辑</view>
		</view>
		
		<view class="form-wrap">
			<view class="form-group form-group__text">
				<textarea class="form-group__from" v-model="formData.content" :placeholder="placeholder" placeholder-class="placeholder-class" />
			</view>
		</view>
		
		<view class="form-wrap">
			<view class="form-group form-group__upload">
				<view class="form-group__title">动态图片</view>
				<view class="form-group__con">
					<u-upload :action="action" @on-uploaded="onUploaded"></u-upload>
				</view>
			</view>
		</view>
		
		
		<view class="circular-submit" @click="formSubmit">立即提交</view>
	</view>
</template>

<script>
	import common from '../utils/common.js'
	import api from '../utils/api.js'
	export default {
		data() {
			return {
				placeholder: '动态内容(最多200字)',
				action: common.apiHost + common.uploadPath,
				fileList: [],
				pet: {},
				formData: {
					petId: '',
					content: '',
					imgUrls: ''
				}
			}
		},
		
		onLoad(options) {
			this.petId = options.id
			this.formData.petId = options.id
		},
		
		methods: {
			// 图片上传
			onUploaded(res) {
				const that = this
				res = res || []
				let temp = []
				if(res.length > 0) {
					res.map(item => {
						let imgPath = item.response.result.result
						temp.push(imgPath)
					})
				}
				that.fileList = temp
				this.formData.imgUrls = temp.join(',')
			},
			
			formSubmit() {
				let that = this
				let formData = this.formData
				if(!formData.content) { this.$showToast('请填写内容~'); return false }
				if(!formData.imgUrls) { this.$showToast('请上传动态图片~'); return false }
				api.savePetNews(formData, res => {
					this.$showToast('动态已提交成功~')
					setTimeout(() => {
						uni.redirectTo({
							url: '/pagesMine/doctorPet'
						})
					}, 2000)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.header-bg {
		width: 100%;
	}
	.ql-container {
		padding: 20upx 0;
		height: 250upx;
		box-sizing: border-box;
		min-height: initial;
	}

	.form-group__upload {
		border-bottom: 1px solid $border-color !important;
	}

	.record {
		text-align: center;
		font-weight: bold;
		color: $theme-color;
		@include flex-base;
		justify-content: center;
		margin-top: 50upx;
	}
	.form-wrap{
		margin-bottom: 20upx;
	}
	.form-group__checkbox{
		.form-group__con{
			@include flex-base;
			justify-content: space-between;
		}
		.form-group__from{
			width: calc(100% - 150upx);
		}
		padding-bottom: 20upx;
	}
	.btn{
		width: 130upx;
		background-color: $theme-color;
		border-radius: 10upx;
		height: 60upx;
		line-height: 60upx;
		font-size: $font-size-24;
		box-sizing: border-box;
	}
	.item-desc{
		font-size: $font-size-26;
		color: #666666;
		line-height: 26upx;
		margin-top: 10upx;
	}
</style>
